// 配置全局状态管理
import Vuex from "vuex";
import Vue from "vue";
import { liuYanBanApi } from "../../components/10-28action使用/api/index"
Vue.use(Vuex);
// vue全家桶:vue,vuex,vue-router
// vuex是数据双向绑定
// state:严格意义上,不可以直接修改,
// 官网:https://vuex.vuejs.org/

// 初始化
export default new Vuex.Store({
  // 开启严格模式
  strict: true,
  // 全局状态存放的地方
  state: {
    userInfo: {
      name: "小明",
      age: "20",
      list: [{ n: 10 }, { n: 20 }, { n: 30 }]
    },
    liuYanBanList:[
      {title:"你还好吗？",conten:"随便吧"}
    ]
  },
  // 对 state进行计算的
  getters: {
    listSumLen(state) {
      // es6语法
      // return state.userInfo?.list?.length;
      return state.userInfo.list.length;
    },
    age(data) {
      return data.userInfo.age;
    },
    getList(state) {
      return state.userInfo.list;
    }
  },
  // 修改state数据的
  mutations: {
    setAge(state, data) {
      // 这个函数里不可以有任何的异步事件,函数
      state.userInfo.age = data;
    },
    setUser(state, data) {
      state.userInfo = Object.assign({}, state.userInfo, data);
    },
    setliuYanBanList(state,data){
      state.liuYanBanList.push(data)
    }
  },
  // 执行异步方法
  actions:{
    getList({commit},query){
      console.log(query)
      setTimeout(()=>{
        const data = {name:"sy",age:25}
        // 调用mutation函数
        commit("setUser",data)
      },2000);
    },
    /*
    需要请求接口来修改state时才使用action
    */ 
   liuYanBan({commit},data){
    //  这里是axios请求接口
    return liuYanBanApi(data).then((res)=>{
      console.log(res)
      commit('setliuYanBanList',res.data.data);
      return res
    })
    
   }
  }
});
